<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <table border="2px">
        <tr>
            <td>用户名</td>
            <td><input type="text" name="" v-model="username"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="" v-model="password"></td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="password" name="" v-model="verfypwd"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                男<input type="radio" name="sex" value="boy" v-model="sex">
                女<input type="radio" name="sex" value='girl' v-model="sex">
            </td>
        </tr>
        <tr>
            <td>爱好</td>
            <td>
                篮球<input type="checkbox" name="like" value="baskatball" v-model="like">
                足球<input type="checkbox" name="like" value="football" v-model="like">
                乒乓球<input type="checkbox" name="like" value="pingpang" v-model="like">
            </td>
        </tr>
        <tr>
            <td>所在城市</td>
            <td>
                <select v-model="city">
                    <option value="11000">北京</option>
                    <option value="12000">上海</option>
                    <option value="13000">广州</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>个人简介</td>
            <td><textarea v-model="desc"></textarea></td>
        </tr>
    </table>
    <button v-on:click="register">注册</button>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            username: '',
            password: '',
            verfypwd: '',  //确认密码
            sex: '',
            city: '',
            like: [],
            desc: ''
        },
        methods: {
            register: function () {
                //this表示当前的vue实例
                //使用 vue中的 data变量时 使用this.变量名
                alert(this.username + this.password + this.verfypwd + this.sex + this.city + this.like + this.desc)
            }
        }
    })

    // function sayHi(name) {
    //     console.log(name)
    // }
    // var say=(参数)=> {
    //     函数体
    //     使用参数： this.参数  此时的this不再指向window 而是指向函数本身
    // }
    // say() 调用
</script>
</html>